<style lang="less">

</style>
<template>
  <div  style="position: relative;">
  <mmTable :mmColumns="columns" ref="mmTable" :getUrl="url" :updateUrl="updateUrl" :delUrl="delUrl"
           :form="form" :formData="formData" v-on:formDataChange="formDataChange"
           :searchFormData="searchFormData" :searchForm="searchForm"
           :modalWidth="700"
  >
    <Form slot="searchForm" ref="searchForm" :model="searchFormData" inline :label-width="70"  style="float: left">
      <FormItem label="用户名" prop="">
        <Input v-model="searchFormData.name" type="text" placeholder="" />
      </FormItem>
    </Form>
    <Form  slot="editForm" :label-width="150" :model="formData" inline ref="editForm" :rules="formValidate">
      <Row>
        <Col :span="24">
        <FormItem label="编号" prop="code" style="width:500px">
          <Input v-model="formData.code" type="text"  />
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="24">
        <FormItem label="姓名" prop="name" style="width:500px">
          <Input v-model="formData.name" type="text"  />
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="24">
        <FormItem label="用户名" prop="username" style="width:500px">
          <Input v-model="formData.username" type="text"  />
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="24">
        <FormItem label="密码" prop="password" style="width:500px">
          <Input v-model="formData.password" />
        </FormItem>
        </Col>
        <!--<Col :span="12">-->
        <!--&nbsp;-->
        <!--</Col>-->
      </Row>
      <Row>
        <Col :span="24">
        <FormItem label="所属部门" prop="dept" style="width:500px">
          <depttree v-model="formData.dept" @select="abc" />
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="24">
        <FormItem label="电话" prop="phone" style="width:500px">
          <Input v-model="formData.phone" />
        </FormItem>
        </Col>
        <!--<Col :span="12">-->
        <!--&nbsp;-->
        <!--</Col>-->
      </Row>
      <Row>
        <Col :span="24">
        <FormItem label="备注" prop="memo" style="width:500px">
          <Input v-model="formData.memo" type="textarea" height="200"/>
        </FormItem>
        </Col>
      </Row>
      <!--<Row>-->
        <!--<Col :span="12">-->
        <!--<FormItem label="联系人" prop="linkman" style="width:300px">-->
          <!--<Input v-model="formData.linkman" />-->
        <!--</FormItem>-->
        <!--</Col>-->
      <!--</Row>-->
      <!--<FormItem label="备注" prop="memo" style="width:640px">-->
        <!--<Input v-model="formData.memo" type="textarea" :rows="4" placeholder="" />-->
      <!--</FormItem>-->
    </Form>

  </mmTable>
    <Modal title="分配权限" v-model="rolesVisible" :mask-closable='false' :width="800">
      <Table border ref="rolesTable" :columns="rolesColumns" :data="rolesData" :loading="tableLoading" @on-select="tableSelect" @on-select-cancel="cancelTableSelect"
             @on-select-all="tableSelectAll" @on-select-all-cancel	="cancelTableSelectAll"></Table>
      <div slot="footer">
        <Button type="text" @click="cancelRoles">取消</Button>
        <Button type="primary" :loading="submitRolesLoading" @click="submitRoles">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {getRolesByPerson,saveRolePerson} from '@/api/data'
  import mmTable from '../components/mmtable/mmtable.vue';
  import depttree from '../components/depttree/depttree.vue'
  import { mapActions } from 'vuex'
  export default {
    components: {
      mmTable,
      depttree
    },
    data () {
      return {
        url:'/User/getList',
        updateUrl:'/User/Save',
        delUrl:'/User/Delete',
        columns:[
          {title: "编号",key: "code",width:200,align:'center'},
          {title: "用户名",key: "username",width:200,align:'center'},
          {title: "姓名",key: "name",width:200,align:'center'},
          {title: "密码",key: "password",width:150,align:'left'},
          {title: "所属部门",key: "dept",width:150,align:'center'},
          {title: "电话",key: "phone",width:150,align:'center'},
          {title: "备注",key: "memo",align:'left'},
          {
            title: "分配角色",
            key: "action",
            width:200,
            align: "center",
            render: (h, params) => {
              return  h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      //this.editPerm(params.row);
                      this.showTable(params.row)
                    }
                  }
                },
                "分配角色"
              )
            }
          }
        ],
        formData:{
          code:'',
          userid:'',
          username: '',
          password:'',
          dept:'',
          phone:'',
          memo:'',
          name:'',
          deptid:''
        },
        form:{},
        formValidate:{
        },
        searchForm:{},
        searchFormData:{
          code:'',
          name:''
        },
        rolesVisible:false,
        tableLoading:false,
        submitRolesLoading:false,
        rolesColumns:[
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {title: "编号",key: "code",width:200,align:'center'},
          {title: "角色",key: "rname",width:150,align:'center'},
          {title: "备注",key: "memo",align:'left'}
        ],
        rolesData:[],
        nowUserid:'',
        checkData:[]
      };
    },
    mounted () {
      this.form = this.$refs.editForm;
      this.searchForm = this.$refs.searchForm;
    },
    methods: {
      ...mapActions([
        'getRoutersConfig'
      ]),
      formDataChange(data) {
        this.formData = data;
      },
      abc(node){
        this.formData.deptid=node.id
      },
      cancelRoles(){
        this.moduleVisible=false;
      },
      submitRoles(){
        if(this.checkData.length>0){
          let data ={}
          let str = JSON.stringify(this.checkData);
          data.data=str
          data.userid=this.nowUserid
          saveRolePerson(data).then(res => {
            this.rolesVisible=false;
            this.getRoutersConfig().then(res =>{
              this.$router.addRoutes(res)
            })
          }).catch(err => {
            console.log(err)
          })

        }else{
          this.rolesVisible=false;
        }

      },
      showTable(params){
        let that = this
        this.tableLoading = true
        this.nowUserid =params.userid
        getRolesByPerson(params.userid).then(res => {
          this.tableLoading = false
          let data = res.data
          if (data.code === 200) {
            that.rolesData = data.data.data
          }
        }).catch(err => {
          console.log(err)
        })
        this.rolesVisible=true;
      },
      tableSelect(selection ,now){
        this.checkData =selection
      },
      cancelTableSelect(selection ,now){
        this.checkData =selection
      },
      tableSelectAll(selection){
        this.checkData =selection
      },
      cancelTableSelectAll(selection){
        this.checkData =selection
      }
    }
  };
</script>
